<template>
    <div id="add-agency">
        <Title title="订单查询"/>
        <div id="form">
            <el-form :model="order" style="width: 80%; text-align: center" ref="ruleForm"
                     label-width="80px" class="form">
                <el-form-item label="订单号" style="width: 300px; height: 30px">
                    <el-input v-model="order.orderNumber"  placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="支付方式" style="width: 300px; height: 30px">
                    <el-select v-model="order.paymentType" placeholder="请选择">
                        <el-option label="线上" value="1"/>
                        <el-option label="线下" value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 100px;">
                    <el-button key="1" size="small" type="primary" @click.prevent="sub('ruleForm')" >
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <Title title="查询结果"/>

        <el-table border
                  :data="tableData
                    .filter(item=>{
                            if (item.paymentType===1){
                                item.paymentType = '线上';
                                }else if (item.paymentType===2){
                                item.paymentType = '线下';
                                }else if(item.state===1){
                                item.state = '已处理';
                                }else if(item.state===2){
                                item.state = '未处理';
                                }
                                return item;
                                })"

                  style="width: 100%">
            <el-table-column label="订单号" prop="orderNumber"/>
            <el-table-column label="支付方式" prop="paymentType"/>
            <el-table-column label="订单描述" prop="orderDescribe"/>
            <el-table-column label="状态" prop="state"/>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        分页-->
        <Pagination path="/api/order/query/"
                    :item="order"
                    :count="count"
                    @transfer="transfer"
        />

    </div>
</template>

<script>
    import Title from "@/components/title/Title";
    import {MessageBox,Table, TableColumn, Button,
        Input, Select, Form, FormItem, Option} from "element-ui";
    import Pagination from "@/components/pagination/Pagination";
    import {post} from "@/request/AxiosMAX";
    import {postToken} from "../../../request/AxiosMAX";
    export default {
        name: "baseManage",
        components: {
            Title,
            "el-table": Table,
            "el-table-column": TableColumn,
            "el-button": Button,
            "el-input": Input,
            "el-select": Select,
            "el-form": Form,
            "el-form-item": FormItem,
            "el-option": Option,
            Pagination,
        },
        data() {
            return {
                //清空级联选择框用的
                //表单数据
                tableData: [],
                //机构对象
                order:{
                    startNumber:1,
                    pageSize:6,
                    orderNumber:"",
                    paymentType:'',
                    state:1
                },
                count:0,

            }
        },
        methods: {
            //获得子组件传过来的参数
            transfer(item){
                this.tableData = item.data;
                this.count = item.count;
            },
            //查询
            sub(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        postToken("/api/order/query/",this.order)
                            .then(res=>{
                                if (res.code===0){
                                    this.tableData = res.data;
                                    this.count = res.count;
                                    this.$message({
                                        message: '查询成功~',
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        message: '提交失败~',
                                        type: 'error'
                                    });
                                }
                            })
                            .catch(err=>{
                                console.info(err);
                                this.$message({
                                    message: '网络错误~',
                                    type: 'error'
                                });
                            });
                    }
                })
            },
            //删除
            handleDelete(index, row) {
                MessageBox.confirm ('确定删除该基地?,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.state = 1;
                    row.auditState = 2;
                    //发送亲求
                    post("/api/Studies_to_travel/base/update",row)
                        .then(res=>{
                            if (res.code===0){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //删除删除的数据
                                this.tableData.splice(index,1);
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                            }
                        }).catch(err=>{
                        console.info(err);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //获得级联选择器中的值
            handleCascader(item){
                this.base.belongAddress = item[0]+item[1]+item[2];
            }
        },
        created() {
            //获得机构
            postToken("/api/order/query/",this.order)
                .then(res=>{
                    if (res.code===0){
                        this.tableData = res.data;
                        this.count = res.count;
                    }
                })
                .catch(err=>{
                    console.info(err);
                })
        }
    }
</script>

<style lang="less">
    #form{
        .form{
            display: flex;
        }
    }
</style>
